<!--
 * @Author: 闫一丹 1437921153@qq.com
 * @Date: 2023-01-01 11:49:30
 * @LastEditors: 闫一丹 1437921153@qq.com
 * @LastEditTime: 2023-01-01 11:56:32
 * @FilePath: \team-graduation-design\src\views\MyChat\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { onMounted } from 'vue'
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
import { myChatStore } from '@/stores/chat.js'
// 实例化仓库
// 使用 chatStore 并返回定义模块的相关状态和方法
const chatStore = myChatStore()
// 解构
const { MyChatPelple } = chatStore
const { chatMsgPelple } = storeToRefs(chatStore)

// 实例化路由
const router = useRouter();
const goBack = () => {
  router.go(-1);
};

// 
onMounted(async()=>{
  try {
    await MyChatPelple()
    console.log(chatMsgPelple.value,'333');
  } catch (error) {
    return Promise.reject(error)
  }
})

</script>

<template>
  <div class="my_chat">
    <header>
      <van-nav-bar left-arrow @click-left="goBack">
        <template #title>
          <span>软件1910班<span>(1)</span></span>
        </template>
      </van-nav-bar>
    </header>
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        v-model="value"
        placeholder="搜索"
        shape="round"
        background="#fff"
        input-align="center"
      />
    </div>
    <!-- 群聊列表 -->
    <div class="chat_list" v-for="(item, index) in chatMsgPelple" :key="index">
      <van-cell is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <img src="/public/images/people.png" alt="" />
          <span class="custom">{{ item.user_name }}</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<style lang="less" scoped>
.chat_list {
  display: flex;
  img {
    width: 45px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
</style>